import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

import {
    Button
} from './../../../components';

import * as Const from "../../../const";
import * as Iap from './../../../utils/iap';
import h_icon from './../.././../images/common/upgrade.png';

interface Props {
    name:string
}

class Upgrade extends PureComponent<Props> {
    static defaultProps = {
        name:`viewed`
    }

    private onUpgrade = () => {
        Iap.buyMember();
    }

    render() {
        return (
            <View style={styles.container}>
                <Image
                    source={h_icon}
                    style={styles.image}
                />
                <Text style={styles.text}>
                    Upgrade now to see who visited you.
                </Text>
                <Button
                    style={styles.button}
                    title="Upgrade now"
                    onPress={this.onUpgrade}
                />
            </View>
        )
    }
}

export default Upgrade;

const styles = StyleSheet.create({
    container:{
        flex:1,
        paddingBottom:30,
        justifyContent:`center`
    },
    text:{
        fontSize:14,
        color:`#333`,
        marginTop:10,
        fontWeight:`bold`,
        textAlign:`center`,
        marginBottom:40
    },
    image:{
        alignSelf:`center`
    },
    button:{
        width:234,
        alignSelf:`center`
    },
    buttonText:{
        fontSize:14,
        color:`#323541`,
        fontFamily:Const.fontFamily
    }
}) as any;